<template>
	<view>
		<view class="header">
			<view class="title">当日检查</view>
			<view @click="tocheck" class="title-list">查看列表</view>
		</view>
		<view class="content">
			<view class="content-key" @click="toindex(index)" v-for="(item,index) in checktype" :key="index">
				<view class="check-title">
					<view>{{item[0]}}</view>
					<view class="english">{{item[1]}}</view>
				</view>
				<view class="progress-conent">
					<myprogress :backcolor="backcolor[index]" :color="color[index]" :value="pro[index]"></myprogress>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
const checktype = [
	['7S检查','7S check'],
	['教学检查', 'Teaching check'],
	['自习检查','Self-study check'],
	['寝室检查','Dormitory inspection']
]
const color = ['#FF4E5E','#4059FF','#FF6702','#3AC3AF']
const backcolor = ['#FFE5E7','#CFE3FF','#FFE1C4','#C3FDF5']
import myprogress from './progress.vue'
import { progress } from '../request/check.js'
export default {
	data() {
		return {
			checktype,
			pro:[],
			color,
			backcolor
		};
	},
	async mounted (){
		const res = await progress()
		this.pro = res.map( res => {
			if(res == null){
				return 100
			}else{
				return res.allProgress == 0 ? 100 : (res.finishProgress / res.allProgress).toFixed(1) * 100
			}
		})
	},
	methods:{
		tocheck(){
			uni.navigateTo({
			    url: '/pages/check/check?checkType=0',
			});
		},
		toindex(index){
			uni.navigateTo({
			    url: `/pages/check/check?checkType=${index}`,
			});
		}
	},
	components:{
		myprogress
	}
}
</script>

<style lang="scss" scoped>
.content{
	width: 100%;
	height:255px;
	background:rgba(248,248,251,1);
	border-radius:10px;
	display: flex;
	flex-direction: column;
	.content-key{
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.progress-conent{
			width: 60%;
			// height: 100%;
		}
	}
	.check-title{
		width: 40%;
		padding-left: 20px;
		overflow:hidden;
		white-space:nowrap;
		text-overflow:ellipsis;
		font-size:15px;
		font-family:DIN;
		font-weight:500;
		color:rgba(57,66,91,1);
	}
	.english{
		font-size:12px;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(150,155,175,1);
	}
}
.header{
	font-size:18px;
	height: 50px;
	line-height: 50px;
	font-family:PingFang SC;
	font-weight:bold;
	color:rgba(57,66,91,1);
	position: relative;
	
}
.title-list{
		position: absolute;
		right: 0px;
		top: 50%;
		transform: translateY(-50%);
		content: '查看列表';
		font-size:10px;
		font-weight:bold;
		color:rgba(57,66,91,1);
		background-image: url('../static/img/icon_fill_right@3x.png');
		background-position: right center;
		background-repeat: no-repeat;
		background-size: 8px 8px;
		padding-right: 12px;
	}
</style>
